<template>
  <div class="employee-management-container">
    <!-- 使用部门树组件 -->
    <DepartmentTree :department-data="departmentData" @node-click="handleNodeClick" ref="departmentTreeRef" />

    <div class="employee-content">
      <div class="employee-management">
        <!-- 搜索和操作区域 -->
        <div class="toolbar">
          <el-form :inline="true" :model="searchForm">
            <el-form-item label="查询策略：">
              <el-select v-model="searchForm.status" placeholder="在职员工">
                <el-option label="在职员工" value="1" />
                <el-option label="离职员工" value="0" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input v-model="searchForm.keyword" placeholder="搜索" clearable />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSearch">搜索</el-button>
            </el-form-item>
          </el-form>

          <div class="actions">
            <el-button type="primary" @click="handleAdd">
              <el-icon>
                <Plus />
              </el-icon>添加机构
            </el-button>
            <el-button @click="handleExport">导出</el-button>
            <el-button @click="handleImport">导入</el-button>
          </div>
        </div>

        <!-- 部门表格 -->
        <div class="table-container">
          <el-table :data="employeeData" border style="width: 100%" v-loading="loading">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="id" label="No." width="60" />
            <el-table-column prop="deptName" label="部门名称" width="150" />
            <el-table-column prop="deptCode" label="部门编号" width="100" />
            <el-table-column prop="type" label="级别" width="100" />
            <el-table-column prop="status" label="状态" width="100">
              <template #default="{ row }">
                <el-tag type="success" v-if="row.status === '正常'">{{ row.status }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="leader" label="主管领导" width="120" />
            <el-table-column prop="creator" label="登记人" width="120" />
            <el-table-column prop="createTime" label="登记时间" width="160" />
            <el-table-column prop="modifier" label="修改人" width="120" />
            <el-table-column prop="modifyTime" label="修改时间" width="160" />
          </el-table>
          <!-- 分页 -->
          <div class="pagination">
            <el-pagination v-model:current-page="pagination.current" v-model:page-size="pagination.size"
              :total="pagination.total" :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange" @current-change="handleCurrentChange" />
          </div>
        </div>

        <!-- 添加/编辑对话框 -->
        <EmployeeDialog v-model="dialogVisible" :form-data="currentEmployee" @submit="handleSubmit" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import EmployeeDialog from './EmployeeDialog.vue'
import DepartmentTree from './components/DepartmentTree.vue'

// 部门树数据
const departmentData = ref([
  {
    id: 1,
    label: '计量中心',
    count: 42,
    children: [
      {
        id: 1,
        label: '中心本部',
        count: 35
      },
    ]
  },
  {
    id: 1,
    label: '检定所',
    count: 42,
    children: [
      {
        id: 1,
        label: '崇左检定所',
        count: 35
      },
      {
        id: 2,
        label: '南宁检定所',
        count: 42
      },
      {
        id: 3,
        label: '贵港检定所',
        count: 28
      },
      {
        id: 4,
        label: '玉林检定所',
        count: 31
      },
      {
        id: 5,
        label: '柳州检定所',
        count: 38
      },
      {
        id: 6,
        label: '桂林检定所',
        count: 35
      },
      {
        id: 7,
        label: '北海检定所',
        count: 25
      },
      {
        id: 8,
        label: '钦州检定所',
        count: 30
      },
      {
        id: 9,
        label: '防城港检定所',
        count: 27
      },
      {
        id: 10,
        label: '贺州检定所',
        count: 24
      },
      {
        id: 11,
        label: '河池检定所',
        count: 29
      },
      {
        id: 12,
        label: '百色检定所',
        count: 33
      }
    ]
  },

])



// 部门树引用
const departmentTreeRef = ref()

// 部门节点点击事件
const handleNodeClick = (data) => {
  console.log('选中部门:', data.label)
  // 这里可以添加加载对应部门员工的逻辑
  // loadEmployeesByDepartment(data.id)
}

onMounted(() => {
  // 初始化时可以设置默认选中的部门
  departmentTreeRef.value?.setCurrentKey(1)
  pagination.total = employeeData.value.length
})

// 搜索表单
const searchForm = reactive({
  status: '1',
  keyword: ''
})

// 分页数据
const pagination = reactive({
  current: 1,
  size: 10,
  total: 0
})

// 员工数据
const employeeData = ref([
  {
    id: 1,
    deptName: '崇左检定所',
    deptCode: '010',
    type: '部门',
    status: '正常',
    leader: '刘强',
    creator: '管理员',
    createTime: '2024-11-27 10:45:13',
    modifier: '刘强',
    modifyTime: '2024-11-27 10:44:55'
  },
  {
    id: 2,
    deptName: '贵港检定所',
    deptCode: '009',
    type: '部门',
    status: '正常',
    leader: '刘强',
    creator: '管理员',
    createTime: '2024-11-27 10:44:35',
    modifier: '刘强',
    modifyTime: '2024-11-27 10:44:19'
  },
])

const loading = ref(false)
const dialogVisible = ref(false)
const currentEmployee = ref({})
const isEditMode = ref(false)

// 搜索员工
const handleSearch = () => {
  loading.value = true
  // 这里应该是API调用
  setTimeout(() => {
    loading.value = false
  }, 500)
}

// 添加员工
const handleAdd = () => {
  currentEmployee.value = {
    name: '',
    account: '',
    position: '',
    department: '',
    orgRelation: '',
    isManager: false,
    supervisor: '',
    gender: '',
    age: '',
    status: '在职',
    accessStatus: '正常',
    phone: '',
    email: ''
  }
  isEditMode.value = false
  dialogVisible.value = true
}

// 编辑员工
const handleEdit = (row) => {
  currentEmployee.value = { ...row }
  isEditMode.value = true
  dialogVisible.value = true
}

// 删除员工
const handleDelete = (row) => {
  ElMessageBox.confirm(`确定要删除员工 ${row.name} 吗?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 这里应该是API调用
    ElMessage.success('删除成功')
  })
}

// 提交表单
const handleSubmit = (formData) => {
  if (isEditMode.value) {
    // 更新逻辑
    const index = employeeData.value.findIndex(item => item.id === formData.id)
    if (index !== -1) {
      employeeData.value[index] = formData
    }
    ElMessage.success('更新成功')
  } else {
    // 添加逻辑
    formData.id = employeeData.value.length + 1
    employeeData.value.unshift(formData)
    ElMessage.success('添加成功')
  }
  dialogVisible.value = false
}

const handleExport = () => ElMessage.info('导出功能')
const handleImport = () => ElMessage.info('导入功能')

// 分页变化
const handleSizeChange = (val) => {
  pagination.size = val
  // 重新获取数据
}

const handleCurrentChange = (val) => {
  pagination.current = val
  // 重新获取数据
}

</script>

<style lang="less" scoped>
.employee-management-container {
  display: flex;
  height: 100%;
  background-color: #f5f7fa;
  overflow: hidden;

  .employee-content {
    flex: 1;
    background-color: #fff;
    padding: 16px;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    overflow: auto;
    margin-left: 16px;
  }
}

.employee-management {
  padding: 20px;
  background-color: #fff;
  height: 100%;

  .header {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
  }

  .toolbar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;

    .actions {
      margin-top: 10px;
    }
  }

  .table-container {
    margin-top: 20px;

    .pagination {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
    }
  }
}


@media (max-width: 768px) {
  .toolbar {
    flex-direction: column;

    .actions {
      margin-top: 10px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
  }
}
</style>